<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>统计分析</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">



</head>
<body>

    <div id="app" >
        <!--日期选择器-->
        <el-date-picker
                v-model="dateChoose"
                @change="fetchData()"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
        </el-date-picker>

        <!--饼图-->
        <div id="main" style="width: 100%;height:400px;"></div>

        <!--表格展示-->
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="name"
                    label="分类名"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="num"
                    label="销售数量"
                    width="150">
            </el-table-column>
            <el-table-column
                    label="销量百分比"
                    width="150">
                <template slot-scope="scope">
                    {{(scope.row.num/totalNum*100).toFixed(0)}}%
                </template>
            </el-table-column>
            <el-table-column
                    label="销售金额"
                    width="150">
                <template slot-scope="scope">
                    {{scope.row.money/100}}
                </template>
            </el-table-column>
            <el-table-column
                    label="金额百分比"
                    width="150">
                <template slot-scope="scope">
                    {{(scope.row.money/totalMoney*100).toFixed(0)}}%
                </template>
            </el-table-column>
        </el-table>
    </div>

</body>
<script src="/js/util.js"></script>
<script src="/js/vue.js"></script>
<script src="/js/axios.js"></script>
<script src="/js/elementui.js"></script>
<script src="/js/echarts.common.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data(){
            return {
                tableData:[],
                totalNum:0,
                totalMoney:0,
                dateChoose:[]
            }
        },
        created(){

        },
        methods:{
            fetchData(){
                //定义查询起始日期
                let startDate=this.dateChoose[0].Format("yyyy-MM-dd");
                let endDate=this.dateChoose[1].Format("yyyy-MM-dd");
                //发送axion请求
                axios.get(`/categoryReport/totalCategory.do?date1=${startDate}&date2=${endDate}`).then(response=>{
                    this.tableData=response.data;
                    //获取数量总数和金额总数
                    this.totalNum=0;
                    this.totalMoney=0;
                    for (let i=0;i<this.tableData.length;i++){
                        this.totalNum+=this.tableData[i].num;
                        this.totalMoney+=this.tableData[i].money;;
                    }
                    let nameList=[];
                    let numList=[];
                    let moneyList=[];
                    //获取商品分类名称集合
                    for (let i=0;i<this.tableData.length;i++){
                        nameList.push(this.tableData[i].name)
                        numList.push({value:this.tableData[i].num,name:this.tableData[i].name})
                        moneyList.push({value:this.tableData[i].money,name:this.tableData[i].name})
                    }

                    let myChart = echarts.init(document.getElementById('main'));

                    // 指定图表的配置项和数据
                    // 指定图表的配置项和数据
                    let option = {
                        title : {
                            text: '商品销售统计',
                            subtext: '按分类',
                            x:'center'
                        },
                        tooltip : {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                            data: nameList
                        },
                        series : [
                            {
                                name: '销售数量',
                                type: 'pie',
                                radius : '55%',
                                center: ['30%', '60%'],
                                data:numList,
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            },
                            {
                                name: '销售金额',
                                type: 'pie',
                                radius : '55%',
                                center: ['80%', '60%'],
                                data:moneyList,
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]

                    };

                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                })
            }
        },

    })
</script>
</html>